<template>

	<view class="">

		<view class="" v-if="clickSkuInfo">
			<!-- 轮播图 -->
			<u-swiper :list="clickSkuInfo.skuImgList" indicator indicatorMode="line" circular height="900"></u-swiper>

			<!-- 中间文字 -->
			<view class="center_wenzi" style="background-color: white;border-radius: 0 0 50px 50px;padding: 10px;">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
					<view class="left_jiage">
						<view class="price" style="">
							<span
								style="font-size: xx-large;font-weight: 700;color: red;">￥{{ formatPrice(clickSkuInfo.price) }}</span>

							<span style="color: red;font-size: 20px;font-weight: 300;">
								.{{newFormatPrice(clickSkuInfo.price) }}
							</span>


							<span
								style="margin-left: 10px; color: #ccc; text-decoration: line-through 3px;">￥{{clickSkuInfo.beforePrice}}</span>

							<span style="margin-left: 4px;color: #ccc;">{{clickSkuInfo.skuWant}}人想要</span>
						</view>
						<view class="zhekou">

						</view>
						<view class="xiangyao">

						</view>
					</view>
					<view v-if="clickSkuInfo.isNew === 0" class="right_tag"
						style="font-size: 20px;font-weight: 400;color: black;">
						全新
					</view>
				</view>

				<view class="content">


					<view class="detail" style="">
						<span v-if="clickSkuInfo.isFreepost === 0" class=""
							style="margin-right: 10px;color: aqua;font-size: x-large;font-weight: 400;">
							包邮
						</span>
						<span>
							{{clickSkuInfo.skuName}}
						</span>

					</view>
					<view class="" style="color: cornflowerblue;font-size: 20px;font-weight: 550;position: relative;
					left: 75vw;
					    top: -3.2vh;
					    padding-left: 20px;
					background: linear-gradient(to right, transparent, white 10px);
					">
						详情
						<u-icon name="arrow-right-double" color="#2979ff" size="40"></u-icon>

					</view>

				</view>

				<view class="address" style="color: #ccc;font-size: 15px;width: 100%;">
					{{ clickSkuInfo.postAddress}}
				</view>


				<!-- 用户信息-->
				<view class="userInfo"
					style="width: 100%;display: flex;justify-content: space-between;padding: 10px 10px 0px 10px;">
					<view class="" style="align-items: center;display: flex;justify-content: space-around;flex: 1;">
						<u-avatar :src="clickSkuInfo.photoUrl" style=""></u-avatar>
						<view style="font-weight: bold;">{{clickSkuInfo.nickName}}
						</view>
					</view>

					<view class="" style="display: flex;justify-content: space-between;align-items: center;flex:2;">

						<view class="" style="display: flex;flex: 1;">
							<view class="">
								<u-icon name="star" size="55"></u-icon>
								<p>收藏</p>
							</view>
							<view class="" style="margin-left: 20px;">
								<u-icon name="share" size="55"></u-icon>
								<p>分享</p>
							</view>

						</view>



						<button @click="gotoChat(clickSkuInfo)"
							style="border-radius: 60px;height: 50px;background-color: yellow;text-align: center;font-size: 1.4rem;flex: 1;">我想要</button>
					</view>

				</view>

			</view>


		</view>



		<view class="" style="margin-top: 20px;" v-for="(skuInfo,index) in skuList" :key="skuInfo.id">
			<!-- 轮播图 -->
			<u-swiper :list="skuInfo.skuImgList" indicator indicatorMode="line" circular height="900"></u-swiper>

			<!-- 中间文字 -->
			<view class="center_wenzi" style="background-color: white;border-radius: 0 0 50px 50px;padding: 10px;">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
					<view class="left_jiage">
						<view class="price" style="">
							<span
								style="font-size: xx-large;font-weight: 700;color: red;">￥{{ formatPrice(skuInfo.price) }}</span>

							<span style="color: red;font-size: 20px;font-weight: 300;">
								.{{newFormatPrice(skuInfo.price) }}
							</span>


							<span
								style="margin-left: 10px; color: #ccc; text-decoration: line-through 3px;">￥{{skuInfo.beforePrice}}</span>

							<span style="margin-left: 4px;color: #ccc;">{{skuInfo.skuWant}}人想要</span>
						</view>
						<view class="zhekou">

						</view>
						<view class="xiangyao">

						</view>
					</view>
					<view v-if="skuInfo.isNew === 0" class="right_tag"
						style="font-size: 20px;font-weight: 400;color: black;">
						全新
					</view>
				</view>

				<view class="content">


					<view class="detail" style="">
						<span v-if="skuInfo.isisFreepost === 0" class=""
							style="margin-right: 10px;color: aqua;font-size: x-large;font-weight: 400;">
							包邮
						</span>
						<span>
							{{skuInfo.skuName}}
						</span>

					</view>
					<view class="" style="color: cornflowerblue;font-size: 20px;font-weight: 550;position: relative;
					left: 330px;
					    top: -25px;
					    padding-left: 20px;
					background: linear-gradient(to right, transparent, white 10px);
					">
						详情
						<u-icon name="arrow-right-double" color="#2979ff" size="40"></u-icon>

					</view>

				</view>

				<view class="address" style="color: #ccc;font-size: 15px;width: 100%;">
					{{skuInfo.postAddress}}
				</view>


				<!-- 用户信息-->
				<view class="userInfo"
					style="width: 100%;display: flex;justify-content: space-between;padding: 10px 10px 0px 10px;">
					<view class="" style="align-items: center;display: flex;justify-content: space-around;flex:1;">
						<u-avatar :src="skuInfo.photoUrl" style=""></u-avatar>
						<view style="font-weight: bold;">{{skuInfo.nickName}}
						</view>
					</view>

					<view class="" style="display: flex;justify-content: space-around;align-items: center;flex:2;">
						<view class="" style="display: flex;flex: 1;">
							<view class="">
								<u-icon name="star" size="55"></u-icon>
								<p>收藏</p>
							</view>
							<view class="" style="margin-left: 20px;">
								<u-icon name="share" size="55"></u-icon>
								<p>分享</p>
							</view>


						</view>


						<button @click="gotoChat(skuInfo)"
							style="border-radius: 60px;height: 50px;background-color: yellow;text-align: center;font-size: 1.4rem;flex: 1;">我想要</button>
					</view>

				</view>

			</view>



		</view>
	</view>


</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},

		props: {
			clickSkuInfo: {
				type: Object,
				required: true
			},
			skuList: {
				type: Array
			}
		},
		data() {
			return {

			}
		},

		methods: {
			gotoChat(skuInfo) {

				//添加对方为好友
				let form = {
					friendId: skuInfo.userId,
					skuId: skuInfo.id
				}
				this.$u.api.addFriend(form)


				// 将 skuInfo 对象转换为字符串，并使用 encodeURIComponent 方法进行 URL 编码
				const skuInfoStr = encodeURIComponent(JSON.stringify(skuInfo));
				// 拼接 URL，将 skuInfo 的字符串形式作为参数传递
				const url = '../../pagesA/chat/chat?userId=' + skuInfo.userId + '&skuInfo=' + skuInfoStr;
				uni.navigateTo({
					url: url
				});
			},
			formatPrice(price) {
				if (!price) return '0';

				const integerPart = Math.floor(price).toString();
				return integerPart;
			},
			newFormatPrice(price) {
				if (!price) return '0.00';

				const decimalPart = (price % 1).toFixed(2).slice(2);
				return decimalPart;
			}
		},
		mounted() {

		},
	}
</script>

<style lang="scss" scoped>
	.center_wenzi {
		display: flex;
		flex-direction: column;
		align-items: center;

		.content {


			.detail {
				font-size: 20px;
				margin-left: 5px;
				/* 添加左侧间距 */
				font-weight: 200px;
				white-space: pre-wrap;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 显示的行数 */
				-webkit-box-orient: vertical;
			}
		}
	}

	::v-deep u-swiper>view {
		border-radius: 30px 30px 0px 0px;
	}
</style>